<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
                template="../template/layout.xhtml">

    <ui:define name="title">
        Users list
    </ui:define>

    <ui:define name="content">
        <section class="admin user-list admin-form task-list-page">
            <h2>Users list</h2>
            <span class="create-user">
                <a href="#{request.contextPath}/faces/admin/userAdd.xhtml" class="button large" style="width: 210px; text-align: center;">Create a new user</a>
            </span>
            <span class="filter-user">
                <input type="text" value="" placeholder="Filter by name or email" id="filter" />
            </span>
            <h:form id="filter-target" p:data-target="span.lookup" p:data-element="tr">
                <h2>Users</h2>
                <h:dataTable value="#{userBean.usersUserRole}" var="user" id="tableUser" columnClasses="width-40,width-200,width-500,width-150,width-150">
                    <h:column>
                        <f:facet name="header">Id</f:facet>
                        <span>#{user.id}</span>
                    </h:column>
                    <h:column>
                        <f:facet name="header">Name</f:facet>
                        <span class="lookup">#{user.firstname} #{user.lastname}</span>
                    </h:column>
                    <h:column>
                        <f:facet name="header">Email</f:facet>
                        <span class="lookup">#{user.email}</span>
                    </h:column>
                    <h:column>
                        <span>
                            <h:link value="Edit" outcome="userEdit.xhtml" class="button">
                                <f:param name="id" value="#{user.id}"/>
                            </h:link>
                        </span>
                    </h:column>
                    <h:column>
                        <span>
                            <h:commandButton value="Remove" action="#{userBean.removeUser(user)}" class="button" />
                        </span>
                    </h:column>
                </h:dataTable>
                <h2>Admins</h2>
                <h:dataTable value="#{userBean.usersAdminRole}" var="user" id="tableAdmin" columnClasses="width-40,width-200,width-500,width-150,width-150">
                    <h:column>
                        <f:facet name="header">Id</f:facet>
                        <span>#{user.id}</span>
                    </h:column>
                    <h:column>
                        <f:facet name="header">Name</f:facet>
                        <span class="lookup">#{user.firstname} #{user.lastname}</span>
                    </h:column>
                    <h:column>
                        <f:facet name="header">Email</f:facet>
                        <span class="lookup">#{user.email}</span>
                    </h:column>
                    <h:column>
                        <span>
                            <h:link value="Edit" outcome="userEdit.xhtml" class="button">
                                <f:param name="id" value="#{user.id}"/>
                            </h:link>
                        </span>
                    </h:column>
                    <h:column>
                        <span>
                            <h:commandButton value="Remove" action="#{userBean.removeUser(user)}" class="button" />
                        </span>
                    </h:column>
                </h:dataTable>
                <h2>Disabled</h2>
                <h:dataTable value="#{userBean.usersDisabledRole}" var="user" id="tableDisabled" columnClasses="width-40,width-200,width-500,width-150,width-150">
                    <h:column>
                        <f:facet name="header">Id</f:facet>
                        <span>#{user.id}</span>
                    </h:column>
                    <h:column>
                        <f:facet name="header">Name</f:facet>
                        <span class="lookup">#{user.firstname} #{user.lastname}</span>
                    </h:column>
                    <h:column>
                        <f:facet name="header">Email</f:facet>
                        <span class="lookup">#{user.email}</span>
                    </h:column>
                    <h:column>
                        <span>
                            <h:link value="Edit" outcome="userEdit.xhtml" class="button">
                                <f:param name="id" value="#{user.id}"/>
                            </h:link>
                        </span>
                    </h:column>
                    <h:column>
                        <span> </span>
                    </h:column>
                </h:dataTable>
            </h:form>
        </section>
    </ui:define>
</ui:composition>

